<template> 
    <!--商品列表-->
    <div class="goods-continal" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
        <!-- 标签形式路由跳转 -->
        <!-- <router-link class="goods-item" v-for="item in goodsList" :key="item.id" tab="div" :to="'/home/goodsinfo?id='+item.id">
            <img :src="item.pic" :alt="item.name">
            <h3>{{ item.name }}</h3>
            <div class="about">
                <h4><span>￥{{ item.minPrice }}</span><i>￥{{ item.originalPrice }}</i></h4>
                <p><span>热卖中</span><span>剩{{ item.stores }}件</span></p>
            </div>
        </router-link> -->

        <div class="goods-item" v-for="item in goodsList" :key="item.id" @click="toDetails(item.id)">
            <img :src="item.pic" :alt="item.name">
            <h3>{{ item.name }}</h3>
            <div class="about">
                <h4><span>￥{{ item.minPrice }}</span><i>￥{{ item.originalPrice }}</i></h4>
                <p><span>热卖中</span><span>剩{{ item.stores }}件</span></p>
            </div>
        </div>

        <!-- 加载状态 -->
        <div class="status-loading">
            <p v-if="isMore"><mt-spinner type="fading-circle" color="#26a2ff" :size="20"></mt-spinner>加载中</p>
            <p v-if="!isMore">没有更多了。。。</p>
        </div>
    </div>
</template>

<script>
    import querystring from 'querystring'

    export default {
        data() {
            return {
                page: 0,   //默认获取第一页
                pageSize: 8,    //默认展示六个商品
                goodsList: [],
                loading: false,
                isMore: true   
            }
        },
        methods: {
            getGoods() {
                this.$http.post('/shop/goods/list',querystring.stringify({
                    page: this.page,
                    pageSize: this.pageSize
                })).then( (res) => {
                    if(res.data.code === 0 ) {
                        this.loading = false
                        this.goodsList = this.goodsList.concat(res.data.data)
                    }else{
                        this.loading = true
                        this.isMore = false
                    }
                } )
            },
            loadMore() {
                this.loading = true;
                this.page++
                this.getGoods()              
            },
            toDetails(id) {
                //编程式路由导航
                // 1.字符串
                // this.$router.push('/home/goodsinfo?id='+id)
                // 2. 对象
                // this.$router.push({ path: '/home/goodsinfo?id='+id })
                // 3. 命名的路由
                // this.$router.push({ name: 'goodsinfo', params: { id: id }})
                // 4. 带查询参数
                this.$router.push({ path: '/home/goodsinfo',query: { id: id } })
            } 
        }
    }
</script>

<style lang="scss">
%flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.mui-scroll-wrapper{
    top: 40px;
}
.goods-continal{
    width: 95%;
    margin: 0 auto;
    padding: 5px 0;
    height: calc(100vh - 90px);     // 规定滚动高度（必要）
    overflow-y: auto;   // 规定滚动高度内滚动（必要）
    @extend %flex;
    .goods-item{
        width: 49%;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 8px;
        @extend %flex;
        flex-direction: column;
        img{
            display: block;
            width: 100%;
            height: 150px;
        }
        h3{
            font-size: 14px;
            padding: 0 5px;
            min-height: 16px;
        }
        .about{
            background: #eee;
            padding: 5px;
            h4{
                font-size: 14px;
                font-weight: normal;
                span{
                    color: firebrick;
                    margin-right: 10px;
                    text-decoration: none;
                    font-weight: bold;
                }
                i{
                    text-decoration: line-through;
                    font-size: 12px;
                }
            }
            p{
                @extend %flex;
                margin-bottom: 0;
                span{
                    display: block;
                    font-size: 12px;
                }
            }
        }
    }
    .status-loading{
        width: 100%;
        height: 40px;
        text-align: center;
        p{
            width: 100%;
            margin: 0 auto;
            .mint-spinner-fading-circle{
                display: inline-block;
                position: relative;
                top: 5px;
                margin-right: 5px;
            }
        }
    }
}
</style>